<template>
  <v-navigation-drawer
    v-model="drawer"
    :clipped="$vuetify.breakpoint.lgAndUp"
    app
  >
    <v-list dense>
      <template v-for="item in items">
        <v-list-group
          v-if="item.children"
          :key="item.text"
          v-model="item.model"
          :prepend-icon="item.model ? item.icon : item['icon-alt']"
          append-icon=""
        >
          <template v-slot:activator>
            <router-link :to="item.router">
              <v-list-item-content>
                <v-list-item-title>
                  {{ item.text }}
                </v-list-item-title>
              </v-list-item-content>
            </router-link>
          </template>
          <v-list-item
            v-for="(child, i) in item.children"
            :key="i"

          >
            <v-list-item-action v-if="child.icon">
              <v-icon>{{ child.icon }}</v-icon>
            </v-list-item-action>
            <router-link :to="child.router">
              <v-list-item-content>
                <v-list-item-title>
                  {{ child.text }}
                </v-list-item-title>
              </v-list-item-content>
            </router-link>
          </v-list-item>
        </v-list-group>
        <v-list-item
          v-else-if="!((item.text==='Login' || item.text==='Register') && this.localStorage.getItem('userName')!=null)"
          :key="item.text"

        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <router-link :to="item.router">
            <v-list-item-content>
              <v-list-item-title>
                {{ item.text }}
              </v-list-item-title>
            </v-list-item-content>
          </router-link>
        </v-list-item>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  import store from '../../store'
  export default {
    methods: {
      openApplyPage: function () {
        this.$router.replace({path: '/applyMeeting'})
      },
      openWorkspace: function () {
        this.$router.replace({path: '/workspace'})
      },
      toProfile () {
        this.$router.replace({path: '/profile'})
      },
      logout () {
        this.$confirm('You want to logout?', 'Confirm', {
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Logout!'
          })
          this.$store.commit('logout')
          this.$router.push({path: '/'})
          location.reload()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Cancelled'
          })
        })
      }
    },
    props: {
      source: String
    },
    data () {
      return {
        userName: store.state.userName, // userDetails.getUsername()
        now: store.state.now,
        drawer: null,
        dropdownItems: [
          {title: 'Profile', function: this.toProfile},
          {title: 'Logout', function: this.logout}
        ],
        items: [
          {icon: 'lightbulb_outline', text: 'News', router: '/news'},
          {
            icon: 'touch_app',
            'icon-alt': 'mdi-chevron-down',
            text: 'Work Space',
            router: '/workspace',
            model: true,
            children: [
              {icon: 'lightbulb_outline', text: 'New Invitation', router: '/newInvitation'},
              {icon: 'lightbulb_outline', text: 'Review', router: '/reviewDashboard'},
              {icon: 'lightbulb_outline', text: 'My Contribution', router: '/myContribution'},
              {icon: 'lightbulb_outline', text: 'Invitation I Sent', router: '/invitationISent'},
              {icon: 'lightbulb_outline', text: 'Rebuttal Dashboard', router: '/rebuttalDashboard'},
            ]
          },
          {icon: 'add', text: 'Apply For A Meeting', router: '/applyMeeting'},
          // {icon: 'lightbulb_outline', text: 'New Discussion', router: '/createDiscussion'},
          {icon: 'lightbulb_outline', text: 'Discussion', router: '/discussion'}
        ]
      }
    },
    created () {
    }
  }
</script>
